<template>
	<view class="formback">


		<!-- <view v-for="(item,index) in dataInfo" :key="idnex">
			{{item}}
		</view> -->


		<!-- 基本信息表单 -->
		<view class="settlement-2 background-f margin-b">
			<view class="settlement-2-img">基本信息</view>
			<uni-forms ref="valiForm1" :modelValue="formData" label-position="top" label-width="auto" :rules="rules"
				style="border-radius: 20rpx;padding: 0 0 16rpx;">
				<uni-forms-item label="申请人姓名" name="applyUserName" required
					style="border-bottom: 1rpx solid #ccc; margin-top: 30rpx;">
					<view class="form-item-content">
						<label class="form-item-label">姓名</label>
						<input type="text" class="form-item-input" disabled="true" v-model="formData.applyUserName"
							placeholder="请输入姓名" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="applyPhone" disabled="true" required
					style="border-bottom: 1rpx solid #ccc;">
					<view class="form-item-content">
						<label class="form-item-label">联系电话</label>
						<input type="text" class="form-item-input" disabled="true" v-model="formData.applyPhone"
							placeholder="请输入电话号码" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="身份证号码" name="applyIdCard" required>
					<view class="form-item-content">
						<label class="form-item-label">身份证号码</label>
						<input type="text" class="form-item-input" disabled="true" v-model="maskedIdCard"
							placeholder="请输入身份证号码" />
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<!-- 其他信息表单 -->
		<uni-forms ref="valiForm2" :modelValue="formData" label-position="top" label-width="auto" :rules="rules"
			style="border-radius: 20rpx;">
			<uni-forms-item label="政治面貌：" name="politicalStatus" required>
				<uni-data-select v-model="formData.politicalStatus"
					:localdata="politicalStatusOptions"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="是否有固定工作单位：" name="hasFixedJob" required>
				<uni-data-select v-model="formData.hasFixedJob" :localdata="yesNoOptions"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="工作单位名称：" name="applyInstitution" required v-if="formData.hasFixedJob==0">
				<uni-easyinput v-model="formData.applyInstitution" placeholder="请输入工会名称"  />
			</uni-forms-item>
			<uni-forms-item label="职业类型：" name="jobType" required>
				<uni-data-select v-model="formData.jobType" :localdata="jobTypeOptions"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="灵活就业类型：" v-if="formData.jobType=='7'" name="flexibleEmploymentType" required>
				<uni-data-select v-model="formData.flexibleEmploymentType"
					:localdata="employmentTypeOptions"></uni-data-select>
			</uni-forms-item>
			<!-- <uni-forms-item label="建会日期：" name="establishmentDate" required>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.establishmentDate" />
			</uni-forms-item> -->
		</uni-forms>

		<!-- 工作信息表单 -->
		<uni-forms ref="valiForm3" :modelValue="formData" label-position="top" label-width="auto" :rules="rules"
			style="border-radius: 20rpx; margin-top: 15rpx;">
			<uni-forms-item label="工作所在地(或居住地)：" name="workOrResidenceLocation" required>
				<uni-data-picker placeholder="请选择转入工作单位" :map="provinceCityAreaDataObj"
					:localdata="provinceCityAreaData" v-model="formData.workOrResidenceLocation"
					@change="changesworkOrResidenceLocation"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="工作单位是否已建会：" name="companyHasUnion" required>
				<uni-data-checkbox selectedColor="#bd1a2d" v-model="formData.companyHasUnion"
					:localdata="yesNoOptions"></uni-data-checkbox>
			</uni-forms-item>

			<uni-forms-item label="申请加入工会：" v-if="formData.companyHasUnion==0" name="settledUnionName" required>
				<uni-easyinput v-model="formData.settledUnionName" placeholder="请输入工会名称" @focus="handleFocus" />
			</uni-forms-item>
		</uni-forms>

		<!-- 同意条款 -->
		<view class="agree flex">
			<view class="left">
				<uni-data-checkbox multiple v-model="checkAll" :localdata="hobbyAll"></uni-data-checkbox>
			</view>
			<view class="right">
				同意<text class="text">《中华全国总工会入会申请书》</text>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="btn1 flex">
			<button :class="`${checkAll[0] ? 'button' : 'button_no'} flex1`" @click="submit('valiForm')"
				:loading="buttonLoading">
				提交申请
			</button>
		</view>

		<uni-popup ref="popup">
			<view class="popup-content-data">
				<treeUnionComponentsVue @selectUnionRow="selectUnionRow" />
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getCityList
	} from '@/api/system/city';
	import tradeUnionSelection from '@/pages/work/tradeUnionSelection.vue'
	import {
		MembershipSubmission
	} from '@/api/work/fillinthemembershipform';
	import {
		toast
	} from '@/utils/common';
	import {
		fillinthemembershipformSubmitData
	} from '@/utils/dataConversion/fillinthemembershipform';
	import treeUnionComponentsVue from '@/components/treeUnionComponents.vue'
	import {
		getDictsList
	} from '../../api/system/dicts';
	import {
		getAllApprovalNode
	} from '../../api/work/allNode';
	export default {
		onLoad(option) {
			this.formData = {
				...this.formData,
				...JSON.parse(option.userObj)
			}
		},

		components: {
			treeUnionComponentsVue,
			tradeUnionSelection
		},
		onShow() {
			this.getCityListFn()
			this.getDictsListData()
			// const eventChannel = this.getOpenerEventChannel();
			// eventChannel.on('acceptDataFromOpenedPage', (data) => {
			// 	console.log('接收到的数据：', data);
			// });

			/**
			 * 判断是否存在入会记录
			 */

			getAllApprovalNode().then(res => {
				if (res.data.isEnrollReportingLevel) {
					uni.redirectTo({
						url: `/pages/work/submittedsuccessfully`
					});
					return
				}
				if (!res.data.enrollApprovalCount === false) {
					uni.redirectTo({
						url: `/pages/work/unionsettlement-form-title?showtitle=false&status=${encodeURIComponent(res.data.enrollApprovalCount)}&name=${encodeURIComponent(res.data.enrollApprovalUnionName)}`
					});

				}
			});




		},

		computed: {
			maskedIdCard() {
				const idCard = this.formData.applyIdCard;
				// 假设掩码规则是只显示前6位和后4位
				return idCard ?
					idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') :
					'';
			}
		},
		data() {
			return {

				buttonLoading: false,
				dataInfo: [],
				checkAll: [],
				hobbyAll: [{
					text: '',
					value: true
				}],
				formData: {
					// applyUserName: '', // 姓名
					// applyPhone: '', // 联系电话
					// applyIdCard: '', // 身份证号码
					// politicalStatus: '', // 政治面貌
					// hasFixedJob: '', // 是否有固定工作单位
					// jobType: '', // 职业类型
					// flexibleEmploymentType: '', // 灵活就业类型
					// establishmentDate: '', // 建会日期
					// workOrResidenceLocation: '', // 工作所在地(或居住地)
					// companyHasUnion: '', // 工作单位是否已建会
					// settledUnionId: '' ,// 申请加入工会

					applyUserName: null, // 姓名
					applyPhone: null, // 联系电话
					applyIdCard: null, // 身份证号码
					politicalStatus: null, // 政治面貌
					hasFixedJob: 0, // 是否有固定工作单位
					jobType: null, // 职业类型
					flexibleEmploymentType: null, // 灵活就业类型
					// establishmentDate: null, // 建会日期
					workOrResidenceLocation: null, // 工作所在地(或居住地)
					applyInstitutionRegion: null,
					companyHasUnion: 0, // 工作单位是否已建会
					applyInstitution: null,
					settledUnionId: null, // 申请加入工会
					applyWay: 1, // 申请方式，必填字段，0表示扫码入会，1表示填报入会
					settledUnionName: null,
					workOrResidenceLocationStr: null,
				},
				rules: {
					applyUserName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					applyPhone: {
						rules: [{
							required: true,
							errorMessage: '联系电话不能为空'
						}]
					},
					applyIdCard: {
						rules: [{
							required: true,
							errorMessage: '身份证号码不能为空'
						}]
					},
					politicalStatus: {
						rules: [{
							required: true,
							errorMessage: '政治面貌不能为空'
						}]
					},
					hasFixedJob: {
						rules: [{
							required: true,
							errorMessage: '是否有固定工作单位不能为空'
						}]
					},
					jobType: {
						rules: [{
							required: true,
							errorMessage: '职业类型不能为空'
						}]
					},
					flexibleEmploymentType: {
						rules: [{
							required: true,
							errorMessage: '灵活就业类型不能为空'
						}]
					},
					establishmentDate: {
						rules: [{
							required: true,
							errorMessage: '建会日期不能为空'
						}]
					},
					workOrResidenceLocation: {
						rules: [{
							required: true,
							errorMessage: '工作所在地不能为空'
						}]
					},
					companyHasUnion: {
						rules: [{
							required: true,
							errorMessage: '工作单位是否已建会不能为空'
						}]
					},
					settledUnionId: {
						rules: [{
							required: true,
							errorMessage: '申请加入工会不能为空'
						}]
					}
				},
				politicalStatusOptions: [],
				yesNoOptions: [{
						value: 0,
						text: '是'
					},
					{
						value: 1,
						text: '否'
					}
				],
				jobTypeOptions: [],
				employmentTypeOptions: [],
				unionOptions: [],
				provinceCityAreaDataObj: {
					text: 'name',
					value: 'id'
				},
				provinceCityAreaData: []
			};
		},
		methods: {

			changesworkOrResidenceLocation(e) {

				console.log(e, "eeeee");

				// 提取 e.detail.value 数组中的每个对象的 text 属性，并用逗号拼接成字符串
				const resultString = e.detail.value.map(option => option.text).join(',');

				this.formData.workOrResidenceLocationStr = resultString
				// 如果需要使用这个字符串，可以将其赋值给组件的数据属性，或者进行其他处理
				console.log(resultString); // 示例输出
				// this.someDataProperty = resultString; // 例如将结果赋值给组件的数据属性
			},

			getDictsListData() {
				getDictsList('political_status').then(res => {
					this.politicalStatusOptions = res.data.map(item => {
						return {
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}
					})
				}).catch(err => {
					console.log(err);
				})
				getDictsList('job_type').then(res => {
					this.jobTypeOptions = res.data.map(item => {
						return {
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}
					})
				}).catch(err => {
					console.log(err);
				})
				getDictsList('flexible_employment_type').then(res => {
					this.employmentTypeOptions = res.data.map(item => {
						return {
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}
					})
				}).catch(err => {
					console.log(err);
				})

			},
			selectUnionRow(row) {
				this.formData.settledUnionId = row.id
				this.formData.settledUnionName = row.name
				this.$refs.popup.close()
			},
			seleceNodeRow(row) {
				console.log(row);

			},
			getCityListFn() {
				getCityList().then(res => {
					this.provinceCityAreaData = res.data
				})
			},

			handleFocus() {

				this.$refs.popup.open()
			},
			dataConversion(data) {

			},
			async submit(ref) {
				if (this.checkAll[0]) {
					try {
						// 验证所有表单
						await this.$refs['valiForm1'].validate();
						await this.$refs['valiForm2'].validate();
						await this.$refs['valiForm3'].validate();

						this.buttonLoading = true;

						const response = await MembershipSubmission(fillinthemembershipformSubmitData(this.formData));

						uni.showToast({
							title: `提交成功`,
						});
						uni.redirectTo({
							url: `/pages/work/unionsettlement-form-title?showtitle=false&status=${0}&name=${this.formData.settledUnionName}`
						});

						console.log(response);
					} catch (error) {
						console.error('提交失败', error);
					} finally {
						this.buttonLoading = false;
					}
				} else {
					toast("请阅读中华全国总工会入会申请书");
				}
			}

		}
	}
</script>



<style lang="scss" scoped>
	.popup-content-data {
		width: 100vw;
		height: 100vh;
	}


	.uni-forms-item__label {

		.is-required {
			display: none !important;
		}
	}

	.formValue {
		margin-bottom: 15rpx;
	}

	.rigthTitel {
		position: relative;
	}

	.rigthTitel-data {
		position: absolute;
		right: 0;
		top: -60upx;
		color: rgba(189, 26, 45, 1);
		text-align: right;
		vertical-align: top;
		font-size: 12px;
	}

	.settlement-2 ::v-deep .uni-forms {
		padding: 0 32rpx 16rpx;
		background-color: #fff;
	}

	::v-deep .uni-forms {
		padding: 0 32rpx 16rpx;
		background-color: #fff;

	}





	.background-f {
		margin: 32rpx !important;
		border-radius: 20rpx;
		margin-bottom: 0;
	}

	.settlement-2 {
		position: relative;
		background-image: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 245, 248, 1) 100%);
		border: 1px solid rgba(189, 26, 45, 1);

		.settlement-2-img {
			background-image: url('../../static/images/ruzhubeijing.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 460rpx;
			height: 70rpx;
			position: absolute;
			top: -20rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			line-height: 75rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.uni-forms-item {
			display: flex;
			align-items: center;
			margin: 0;
			margin-bottom: 16rpx;
			padding: 32rpx 25rpx;

			.uni-forms-item__content {
				width: 100%;
			}

			.form-item-content {
				display: flex;
				align-items: center;
				width: 100%;

			}

			.form-item-label {
				font-size: 14px;
				color: rgba(51, 51, 51, 1);
				width: 300rpx;
			}

			.form-item-input {
				text-align: right;
				flex: 1;
				margin-left: 16rpx;
				border: none;
				background: none;
				box-shadow: none;
				border-radius: 4rpx;
				font-size: 14px;
			}
		}

		::v-deep .uni-forms-item__label {
			display: none; // Hide default label if using custom labels
		}

	}

	.agree {
		padding: 32rpx;
		margin-top: 16rpx;
		background-color: #fff;

		.left {
			width: 52rpx;
		}

		.right {
			.text {
				font-size: 12px;
				color: rgba(189, 26, 45, 1);
			}
		}
	}
</style>